<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><c:out value="${ roomName }预约情况"></c:out></title>
<link
	href="${pageContext.request.contextPath }/resources/script/fullcalendar-3.0.1/fullcalendar.css"
	rel='stylesheet'>
<link
	href="${pageContext.request.contextPath }/resources/script/fullcalendar-3.0.1/fullcalendar.print.css"
	rel='stylesheet' media='print'>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/dwr/engine.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/dwr/util.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/dwr/interface/eventObjectService.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/resources/script/fullcalendar-3.0.1/lib/moment.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/resources/script/fullcalendar-3.0.1/lib/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/resources/script/fullcalendar-3.0.1/fullcalendar.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/resources/script/fullcalendar-3.0.1/locale-all.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/resources/script/layer/layer.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/resources/script/jquery.datetimepicker.js"></script>
<script>
	function callBack(jsonObjects) {
		//使用jQuery便利List对象
		$.each(jsonObjects, function(i, value) {
			eventData = {
				id : jsonObjects[i]['id'],
				title : jsonObjects[i]['title'],
				start : jsonObjects[i]['start'],
				end : jsonObjects[i]['end']
			};
			$('#calendar').fullCalendar('renderEvent', eventData, true);
		})
	};

	$(document)
			.ready(
					function() {
						$('#calendar')
								.fullCalendar(
										{
											header : {
												left : 'prev,next today',
												center : 'title',
												right : 'month,basicWeek,basicDay'
											},
											viewRender : function(view, element) {
												if (view.name == 'month') {
													$("#calendar")
															.fullCalendar(
																	'removeEvents');
													var roomId = $.request.queryString["roomId"];
													var start = view.start;
													// layer.msg(start.toISOString());//这个方法获取正常格式的日期
													eventObjectService
															.getEventObjectsStart(
																	start
																			.toISOString(),
																	roomId,
																	callBack);
												}
												;
											},
											//默认日期为当天
											defaultDate : new Date(),
											locale : 'zh-cn',
											buttonIcons : false, // show the prev/next text
											weekNumbers : true,
											timeFormat : 'HH:mm',// 每个事件默认显示的时间格式
											navLinks : true, // can click day/week names to navigate views
											selectable : true,
											selectHelper : true,
											select : function(start, end) {
												var roomId = $.request.queryString["roomId"];
												layer
														.open({
															title : '新增会议',
															type : 2,
															area : [ '425px',
																	'405px' ],
															content : '${ pageContext.request.contextPath }/newbooking?currentDate='
																	+ start
																	+ '&roomId='
																	+ roomId
														});
												// var eventData;
												//if (title) {
												//	eventData = {
												//		title: title,
												//		start: start,
												//		end: end
												//		};
												//	$('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true 
												//}
												//$('#calendar').fullCalendar('unselect');
											},
											editable : true,
											eventLimit : true, // allow "more" link when too many events
											//events : ${jsonList},
											eventClick : function(event,
													jsEvent, view) {
												layer
														.open({
															title : '会议说明',
															type : 2,
															area : [ '425px',
																	'405px' ],
															content : '${ pageContext.request.contextPath }/booking?id='
																	+ event.id // 会议概要说明
														});
											}
										});
					});

	function deleteEvent(id) {
		$('#calendar').fullCalendar('removeEvents', id);
	};
	//获取parameters的脚本
	$.request = (function() {
		var apiMap = {};
		function request(queryStr) {
			var api = {};
			if (apiMap[queryStr]) {
				return apiMap[queryStr];
			}
			api.queryString = (function() {
				var urlParams = {};
				var e, d = function(s) {
					return decodeURIComponent(s.replace(/\+/g, " "));
				}, q = queryStr.substring(queryStr.indexOf('?') + 1), r = /([^&=]+)=?([^&]*)/g;
				while (e = r.exec(q))
					urlParams[d(e[1])] = d(e[2]);
				return urlParams;
			})();
			api.getUrl = function() {
				var url = queryStr.substring(0, queryStr.indexOf('?') + 1);
				for ( var p in api.queryString) {
					url += p + '=' + api.queryString[p] + "&";
				}
				if (url.lastIndexOf('&') == url.length - 1) {
					return url.substring(0, url.lastIndexOf('&'));
				}
				return url;
			}
			apiMap[queryStr] = api;
			return api;
		}
		$.extend(request, request(window.location.href));
		return request;
	})();
</script>
<style>
/
* button, input {
	border: 1px solid #999;
	padding: 5px 10px;
}
/* margin: 0 10px 10px 0; 
}*/
button {
	cursor: pointer;
}

* /

body {
	margin: 40px 10px;
	padding: 0;
	font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
	font-size: 14px;
}

#calendar {
	max-width: 80%;
	margin: 0 auto;
}
</style>
</head>
<body>
	<div align="center"
		style="font-family: arial, Hiragino Sans GB, Microsoft Yahei, sans-serif; font-size: 25px">
		${ roomName }</div>
	<div id='calendar'></div>
</body>
</html>